<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易网页示例</title>
    <!-- 使用CDN引入基础样式 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* 自定义样式 */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
        }
        .hero {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 6rem 0;
            margin-bottom: 3rem;
        }
        .feature-card {
            border: none;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }
        .feature-card:hover {
            transform: translateY(-5px);
        }
        .section {
            padding: 4rem 0;
        }
        .section-title {
            margin-bottom: 2rem;
            font-weight: 700;
        }
        footer {
            background-color: #f8f9fa;
            padding: 2rem 0;
            margin-top: 3rem;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">简易网页</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#home">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#features">功能</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#about">关于我们</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact">联系我们</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 英雄区域 -->
    <section id="home" class="hero">
        <div class="container text-center">
            <h1 class="display-4 mb-4">欢迎访问我们的网站</h1>
            <p class="lead mb-6">这是一个使用基础HTML、CSS和JavaScript创建的简易网页示例</p>
            <a href="#features" class="btn btn-light btn-lg">了解更多</a>
        </div>
    </section>

    <!-- 功能展示 -->
    <section id="features" class="section">
        <div class="container">
            <h2 class="text-center section-title">主要功能</h2>
            <div class="row gap-4">
                <!-- 功能卡片1 -->
                <div class="col-md-4">
                    <div class="card feature-card">
                        <img src="https://picsum.photos/300/200?random=1" class="card-img-top" alt="功能1">
                        <div class="card-body">
                            <h5 class="card-title">响应式设计</h5>
                            <p class="card-text">在任何设备上都能完美展示，从手机到桌面电脑。</p>
                        </div>
                    </div>
                </div>
                <!-- 功能卡片2 -->
                <div class="col-md-4">
                    <div class="card feature-card">
                        <img src="https://picsum.photos/300/200?random=2" class="card-img-top" alt="功能2">
                        <div class="card-body">
                            <h5 class="card-title">简洁美观</h5>
                            <p class="card-text">简洁现代的设计风格，给用户更好的视觉体验。</p>
                        </div>
                    </div>
                </div>
                <!-- 功能卡片3 -->
                <div class="col-md-4">
                    <div class="card feature-card">
                        <img src="https://picsum.photos/300/200?random=3" class="card-img-top" alt="功能3">
                        <div class="card-body">
                            <h5 class="card-title">易于使用</h5>
                            <p class="card-text">直观的用户界面，让用户轻松找到所需信息。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 关于我们 -->
    <section id="about" class="section bg-light">
        <div class="container">
            <h2 class="text-center section-title">关于我们</h2>
            <div class="row align-items-center">
                <div class="col-md-6">
                    <img src="https://picsum.photos/500/400?random=10" class="img-fluid rounded-lg" alt="关于我们">
                </div>
                <div class="col-md-6">
                    <h3 class="mb-4">我们的使命</h3>
                    <p class="mb-3">我们致力于创建高质量、用户友好的网站，帮助企业和个人在互联网上建立强大的在线存在。</p>
                    <p class="mb-3">通过结合最新的技术和设计趋势，我们为客户提供定制化的解决方案，满足他们的特定需求。</p>
                    <p>无论您是需要一个简单的个人博客还是复杂的企业网站，我们都能为您提供专业的服务。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系我们 -->
    <section id="contact" class="section">
        <div class="container">
            <h2 class="text-center section-title">联系我们</h2>
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <form id="contactForm">
                        <div class="mb-3">
                            <label for="name" class="form-label">姓名</label>
                            <input type="text" class="form-control" id="name" placeholder="请输入您的姓名">
                        </div>
                        <div class="mb-3">
                            <label for="email" class="form-label">邮箱</label>
                            <input type="email" class="form-control" id="email" placeholder="请输入您的邮箱">
                        </div>
                        <div class="mb-3">
                            <label for="message" class="form-label">留言</label>
                            <textarea class="form-control" id="message" rows="4" placeholder="请输入您的留言"></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">提交</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer>
        <div class="container text-center">
            <p>&copy; 2023 简易网页. 保留所有权利.</p>
        </div>
    </footer>

    <!-- JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 表单提交处理
        document.getElementById('contactForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;
            const message = document.getElementById('message').value;
            
            if (!name || !email || !message) {
                alert('请填写所有必填字段');
                return;
            }
            
            // 模拟表单提交
            alert('感谢您的留言，我们将尽快与您联系！');
            this.reset();
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 70,
                        behavior: 'smooth'
                    });
                }
            });
        });
    </script>
</body>
</html>